<template>
  <div class="carbg">

    <div class="mui-card" v-for="(item, index) in carlist" :key="index">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
           <mt-switch v-model="item.isSelceted"></mt-switch>
           <img :src="item.thumb" alt="" width="40px" height="40px">
         <div>
           <span><h3 class="caritem-tit">{{item.goodsname}}</h3></span>
           <p class="caritem-info">
             <span class="price">价格：￥{{item.price}}</span>
               <numbox :curVal="item.count" :minVal="1" :id="parseInt(item.id)"></numbox>
               <a href="javascript:;" @click="removCarItem(item.id)">删除</a>
             </p>
         </div>
        </div>
      </div>
    </div>

    <div class="mui-card" id="js">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <div class="jiesuan">
            <p>总计：（不含运费）</p>
            <p class="mag0">已勾选商品<span>{{this.$store.getters.getCarTotal.o}}</span>件，总价<span>{{this.$store.getters.getCarTotal.p}}元</span></p>
          </div>
          <mt-button type="danger">结算</mt-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import numbox from '../sub/numbox-shopcar.vue'
export default {
    data() {
      return {
        carlist:this.$store.getters.getCarItem||[],
      };
    },
    methods: {
      removCarItem(id){
        this.$store.commit('removeCarItem',id)
      }
    },
    components:{
        numbox
      },
  created() {
    this.$emit("changTit",true,'购物车');
  },

};
</script>
<style lang="scss" scoped>
.carbg{
  background: #eee;  padding-top: 10px; height: 100%;
}
 .mui-card-content-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .caritem-tit{
    font-size: 13px
  }
  .caritem-info{font-size: 12px;
  .price{color:red;font-weight: bold;}
  }
.mag0{margin: 0}
}

</style>




